<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 平台商户
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>
                <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="用户名"></el-table-column>
                <el-table-column label="账户余额">
                    <template #default="scope">￥{{ scope.row.money }}</template>
                </el-table-column>
                <el-table-column label="头像(查看大图)" align="center">
                    <template #default="scope">
                        <el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-tag :type=" scope.row.state === '成功' ? 'success' : scope.row.state === '失败' ? 'danger' : '' ">{{ scope.row.state }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="注册时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="func_handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="func_handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="func_handleSizeChange" @current-change="func_handlePageChange" 
                        background layout="total, sizes, prev, pager, next," 
                        :current-page="query.pageNum"
                        :page-sizes=[10,50,100]
                        :page-size="query.pageSize"
                        :total="total" />
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchCustomerData } from "../../api/customer.js";

export default {
    name: "basetable",
    setup() {
        const query = reactive({
            address: "",
            name: "",
            pageIndex: 1,
            pageSize: 10,
        });
        const tableData = ref([]);
        const pageTotal = ref(0);
        const total = ref(0);
        // 获取表格数据
        const func_getData = () => {
            fetchCustomerData(query).then((res) => {
                tableData.value = res.list;
                pageTotal.value = res.pageTotal || 50;
            });
        };
        func_getData();
        // 查询操作
        const func_handleSearch = () => {
            query.pageIndex = 1;
            func_getData();
        };
        // 分页导航
        const func_handlePageChange = (val) => {
            query.pageIndex = val;
            func_getData();
        };
        /**
         * @name 分页数量查询
         */
        const func_handleSizeChange = (val) => {
            isLoading.value = true;
            query.pageNum = 1;
            query.pageSize = val;
            func_func_getData();
        }; 
        // 删除操作
        const func_handleDelete = (index) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
            })
                .then(() => {
                    ElMessage.success("删除成功");
                    tableData.value.splice(index, 1);
                })
                .catch(() => {});
        };
        // 表格编辑时弹窗和保存
        let customerForm = reactive({
            name: "",
            address: "",
        });
        let idx = -1;
        const func_handleEdit = (index, row) => {
            idx = index;
            Object.keys(customerForm).forEach((item) => {
                customerForm[item] = row[item];
            });
        };
        return {
            query,tableData, pageTotal, total,
            customerForm,
            func_getData, func_handleSearch,
            func_handlePageChange, func_handleSizeChange,
            func_handleDelete, func_handleEdit,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
